import React, {useEffect, useState} from 'react';

const DynamicComponentLoader = ({componentName}) => {
    console.log(componentName, 'componentName')
    const [Component, setComponent] = useState(null);
    useEffect(() => {
        if (componentName) {
            let cancelLoad = false;
            const loadComponent = async () => {
                try {
                    const module = await import(`./${componentName}`);
                    if (!cancelLoad) {
                        setComponent(module.default);
                    }
                } catch (error) {
                    console.error("Failed to load component", error);
                }
            };
            loadComponent();
        }
    }, [componentName]);
    return <>
        {Component ? <Component /> : null}</>
};

export default DynamicComponentLoader;